<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
	<base th:href="${#request.getContextPath()}+'/'">
		<meta charset="UTF-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--bootstrap的css核心 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script src="js/fileinput.min.js" type="text/javascript"></script>
		<!--生成弹框，提示框，下拉菜单-->
		<script type="text/javascript" src="js/popper.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<link href="css/city-picker.css" rel="stylesheet" type="text/css" />
		<title></title>
	<script type="text/javascript">
		//注册新增按钮的事件
		$(function(){
			$('#myname').click(function(){
//			$("#myModalLabel").text("新增");
            $('#myModal').modal();
		});
		        $('#myname1').click(function(){
            	$('#myModal1').modal();
            })
		       	$('#btn_delete').click(function(){
            	$('#myModal2').modal();
           })
		       	$('#add').click(function(){
            	$('#addmoive').modal();
           })
		      	
		})
		//添加分影院
		function addcinema(){
			var a=$("#moivename").val();
			var b=$("#city-picker3").val();
			var c=$("#address").val();
			var address=b+"/"+c;
			var d=$("#describe").val();
			var e=$("#tel").val();
			alert(1);
			  $.ajax({
				   url:"/cinema/add",
				   //dataType:"json",
 				   data:{yname:a,
 					  yaddress:address,
 					 ytext:d,
 					yphone:e},
				   type:"post",
				   success:function(data){
					   alert(data);
				   }
			   })  
		}
		</script>
					  <style>
  /* Make the image fully responsive */
  			.carousel-inner img {
      		width: 100%;
      		height: 100%;
  				}
 		 </style>
	</head>
	<!--
    	作者：offline
    	时间：2019-09-09
    	描述：影院详情介绍
    -->
	<body>
				<div id="" class="container">
			<table class="table table-striped table-bordered  table-hover"
				style="text-align: center;">
								<thead>
			<tr style="background-color: #CCCCCC;">
				<th style="text-align: center;">分影院名称</th>
				<th style="text-align: center;">影院地址</th>
				<th style="text-align: center;">所属影院</th>
				<th style="text-align: center;">详情</th>
				<th style="text-align: center;">操作</th>
			</tr>
			
			</thead>
			<tbody>
				<tr>
					<td>太平洋分影院1</td>
					<td>成都市双流区</td>
					<td>太平洋影院</td>
					<td><button type="button" class="btn btn-info btn-sm" id="myname">查看详情</button></td>
					<td style="width: 180px;">
						<!--<div class="btn-group btn-group-sm">-->
						<button type="button" class="btn btn-success btn-sm" id="myname1">修改</button>
						<button type="button" class="btn btn-danger btn-sm"
							id="btn_delete">删除</button>
						<!--</div>-->
					</td>
			
				</tr>
					<tr>
					<td>太平洋分影院2</td>
					<td>成都市双流区</td>
					<td>太平洋影院</td>
					<td><button type="button" class="btn btn-info btn-sm">查看详情</button></td>
					<td style="width: 180px;">
						<!--<div class="btn-group btn-group-sm">-->
						<button type="button" class="btn btn-success btn-sm">修改</button>
						<button type="button" class="btn btn-danger btn-sm">删除</button>
						<!--</div>-->
					</td>
				
				</tr>
					<tr style="height: 48px;">
					<td>太平洋分影院3</td>
					<td>成都市双流区</td>
					<td>太平洋影院</td>
					<td><button type="button" class="btn btn-info btn-sm">查看详情</button></td>
		
					<td style="width: 180px;">
						<!--<div class="btn-group btn-group-sm">-->
						<button type="button" class="btn btn-success btn-sm">修改</button>
						<button type="button" class="btn btn-danger btn-sm">删除</button>
						<!--</div>-->

					</td>
				</tr>
			</tbody>
			</table>
		<button style="float: right;" class="btn btn-success" id="add">添加分影院</button> 
		</div>
 			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                	<h6 class="modal-title" id="myModalLabel">影院详情</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    
                </div>
                <div class="modal-body">
                	<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <!--<ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>-->
 
  <!-- 影院轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <!--<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">-->
      	<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
    </div>
    <div class="carousel-item">
      <!--<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">-->
    </div>
    <div class="carousel-item">
      <!--<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">-->
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <!--<a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>-->
 
</div>
					<label for="txt_departmentname">影院名称：太平洋影院1</label><br />
					
					<label for="txt_departmentname">影院介绍：</label><br />
					<p>五星级新城市电影城于2005年9月16日正式揭幕。影城拥有9个国际标准电影放映厅
						，近1310个符合人体力学的高级舒适坐席。配备电脑售票和会员卡消费系统、影厅多媒体播放系统、
						等离子电视墙、影城局域网、 LED 显示屏、中央空调系统、自动扶梯、直升电梯等先进设施。
						影城具有保障五星级标准的整套管理制度及服务质量保证体系，采用国际流行方式，
						设置观众进退场专用通道，以及无障碍通道和残疾人专用卫生洁具。</p>
					<label for="txt_departmentname">所属影院：太平洋影院</label><br />
					<label for="txt_departmentname">影院地址：成都市天府三街</label><br />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                    <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>确定</button>
                </div>
            </div>
        </div>
    </div>
        <!--影院信息修改
    	
    -->
	<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 100%;">
        <div class="modal-dialog" role="document" style="width: 800px;">
            <div class="modal-content">
                <div class="modal-header">
                	<h6 class="modal-title" id="myModalLabel">影院信息修改</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    
                </div>
                
                <div class="modal-body">
                <div class="form-group">
                    <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
                </div>
					<div class="form-group">
                        <label for="txt_departmentname">影院名称</label>
                        <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="影院名称">
                    </div>
                <div class="form-group">
					<div style="position: relative;">
					<label for="txt_departmentname">影院地区</label><br />
					<div id="">
					<input id="city-picker3" class="form-control" readonly type="text" value="四川省/成都市/青羊区" data-toggle="city-picker" style="width: 200px;">
					<button class="btn btn-warning btn-sm" id="reset" type="button" style="float: right;">重置</button>
					<button class="btn btn-danger btn-sm" id="destroy" type="button" style="float: right;">确定</button>
					</div>
					</div>
				</div>
					<div class="form-group">
                        <label for="txt_departmentname">详细地址</label>
                        <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="详细地址">
                    </div>
                   	<div class="form-group">
					<div class="form-group">
						<label for="name">影院介绍</label>
						<textarea class="form-control" rows="3"></textarea>
					</div>
                    </div>
				</div>

                <div class="modal-footer">
                	<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>修改</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消</button>
                    
                </div>
            </div>
        </div>
    </div>
 <!--   删除确认-->
                             <!-- 模态框   信息删除确认 -->
                            <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 100%;">
                                <div class="modal-dialog">
                                    <div class="modal-content message_align">
                                        <div class="modal-header">
                                        	<h6 class="modal-title" id="myModalLabel" style="float: left;">删除确认</h6>
                                            <button type="button" class="close" data-dismiss="modal"
                                                aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                            
                                        </div>
                                        <div class="modal-body">
                                            <!-- 隐藏需要删除的id -->
                                            <input type="hidden" id="deleteHaulId" />
                                            <h5>您确认要删除该条信息吗？</h5>
                                        </div>
                                        <div class="modal-footer">
                                        	<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>确认</button>
                    					<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消</button>
                   					 	
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                               </div>
     <!--分影院的添加
    	
    -->

	<div class="modal fade" id="addmoive" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 100%;">
        <div class="modal-dialog" role="document" style="width: 800px;">
            <div class="modal-content">
                <div class="modal-header">
                	<h6 class="modal-title" id="myModalLabel">添加分影院</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    
                </div>
                
                <div class="modal-body">
                <div class="form-group">
                    <input id="file-2" type="file" name="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1">
                </div>
					<div class="form-group">
                        <label for="txt_departmentname">影院名称</label>
                        <input type="text" name="txt_departmentname" class="form-control" id="moivename" placeholder="影院名称">
                    </div>
                <div class="form-group">
					<div style="position: relative;">
					<label for="txt_departmentname">影院地区</label><br />
					<div id="">
					<input id="city-picker3" class="form-control" readonly type="text" value="四川省/成都市/青羊区" data-toggle="city-picker" style="width: 200px;">
					<button class="btn btn-warning btn-sm" id="reset" type="button" style="float: right;">重置</button>
					<button class="btn btn-danger btn-sm" id="destroy" type="button" style="float: right;">确定</button>
					</div>
					</div>
				</div>
					<div class="form-group">
                        <label for="txt_departmentname">详细地址</label>
                        <input type="text" name="txt_departmentname" class="form-control" id="address" placeholder="详细地址">
                    </div>
                    <div class="form-group">
                        <label for="txt_departmentname">联系电话</label>
                        <input type="text" name="txt_departmentname" class="form-control" id="tel" placeholder="电话号码">
                    </div>
					<div class="form-group">
						<label for="name">影院介绍</label>
						<textarea class="form-control" rows="3" id="describe"></textarea>
					</div>
				</div>

                <div class="modal-footer">
                	<button type="button" id="addbtn" onclick="addcinema()" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>添加</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消</button>
                    
                </div>
            </div>
        </div>
    </div>
    	<script src="js/city-picker.data.js"></script>
		<script src="js/city-picker.js"></script>
		<script src="js/main.js"></script>
		<script>
		//影院修改上传图片
		$("#file-1").fileinput({     	
        uploadUrl: '#', // 上传的url
        allowedFileExtensions : ['jpg', 'png','gif'],
        overwriteInitial: false,
        maxFileSize: 3000,
        maxFilesNum: 10,
        //allowedFileTypes: ['image', 'video', 'flash'],
        slugCallback: function(filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
		});
		//影院的添加上传图片
		$("#file-2").fileinput({     	
        uploadUrl: '/cinema/upload', // 上传的url
        allowedFileExtensions : ['jpg', 'png','gif'],
        overwriteInitial: false,
        maxFileSize: 3000,
        maxFilesNum:2,
        minFileCount:1,
        msgFilesTooLess:'上传图片数量最少为 <b>{1}</b> 请重新选择.',
        //allowedFileTypes: ['image', 'video', 'flash'],
        slugCallback: function(filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
		});
		</script>
	</body>
</html>
